<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AI对话系统</title>
        <link rel="stylesheet" href="style.css">
        <!-- 引入markdown-it库用于Markdown解析 -->
        <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
        <!-- 引入highlight.js用于代码高亮 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github.min.css">
        <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/core.min.js"></script>
        <!-- 引入MathJax用于数学公式支持 -->
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/render-mathml.min.js"></script>
    </head>
<body>
    <div class="container">
        <div class="main-content">
            <section class="config-section">
                <div class="config-content">
                    <h2>API配置</h2>
                    <div class="form-group">
                        <label for="api-url">API地址</label>
                        <input type="text" id="api-url" value="https://open.bigmodel.cn/api/paas/v4/chat/completions">
                    </div>
                    <div class="form-group">
                        <label for="api-key">API密钥</label>
                        <input type="password" id="api-key" placeholder="输入您的API密钥">
                    </div>
                    
                    <div class="form-group">
                        <label for="model-type">模型类型</label>
                        <select id="model-type">
                            <option value="text">文本模型</option>
                            <option value="vision">视觉模型</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="model">模型选择</label>
                        <select id="model">
                            <!-- 文本模型选项 -->
                            <optgroup label="旗舰模型">
                                <option value="glm-4.6">GLM-4.6 (高智能旗舰)</option>
                                <option value="glm-4.5">GLM-4.5 (超强性能)</option>
                            </optgroup>
                            <optgroup label="性能优化模型">
                                <option value="glm-4.5-x">GLM-4.5-X (超强性能-极速版)</option>
                                <option value="glm-4.5-air">GLM-4.5-Air (高性价比)</option>
                                <option value="glm-4.5-airx">GLM-4.5-AirX (高性价比-极速版)</option>
                            </optgroup>
                            <optgroup label="通用模型">
                                <option value="glm-4-plus">GLM-4-Plus (性能优秀)</option>
                                <option value="glm-4-air-250414">GLM-4-Air-250414 (高性价比)</option>
                                <option value="glm-4-long">GLM-4-Long (超长输入)</option>
                                <option value="glm-4-airx">GLM-4-AirX (极速推理)</option>
                                <option value="glm-4-flashx-250414">GLM-4-FlashX-250414 (高速低价)</option>
                            </optgroup>
                            <optgroup label="免费模型">
                                <option value="glm-4.5-flash" selected>GLM-4.5-Flash (免费模型)</option>
                                <option value="glm-4-flash-250414">GLM-4-Flash-250414 (免费模型)</option>
                            </optgroup>
                            
                            <!-- 视觉模型选项 -->
                            <optgroup label="视觉旗舰模型" class="vision-model">
                                <option value="glm-4.5v">GLM-4.5V (旗舰视觉推理)</option>
                            </optgroup>
                            <optgroup label="视觉理解模型" class="vision-model">
                                <option value="glm-4.1v-thinking-flashx">GLM-4.1V-Thinking-FlashX (轻量视觉推理)</option>
                                <option value="glm-4v-plus-0111">GLM-4V-Plus-0111 (视觉理解)</option>
                            </optgroup>
                            <optgroup label="免费视觉模型" class="vision-model">
                                <option value="glm-4.1v-thinking-flash">GLM-4.1V-Thinking-Flash (免费模型)</option>
                                <option value="glm-4v-flash">GLM-4V-Flash (免费模型)</option>
                            </optgroup>
                        </select>
                        <div id="model-info" class="model-info">
                            <span id="model-context">上下文: 128K</span>
                            <span id="model-output">最大输出: 16K</span>
                            <span id="model-free" class="free-tag" style="display: none;">免费模型</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="temperature">温度 (Temperature)</label>
                        <input type="range" id="temperature" min="0" max="2" step="0.1" value="1.0">
                        <span id="temperature-value">1.0</span>
                    </div>
                    <div class="form-group">
                        <label for="max-tokens">最大令牌数 (Max Tokens)</label>
                        <input type="number" id="max-tokens" value="1024" min="1" max="4096">
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="stream-response"> 启用流式响应
                        </label>
                    </div>
                    
                    <div class="role-management">
                        <h3>角色管理</h3>
                        <div class="form-group">
                            <button id="add-role">添加角色</button>
                        </div>
                        <div class="role-buttons" id="role-buttons">
                            <!-- 角色按钮将在这里动态生成 -->
                        </div>
                        <div class="role-editor" id="role-editor">
                            <div class="role-header">
                                <input type="text" class="role-name-input" id="role-name" placeholder="角色名称">
                                <div class="role-actions">
                                    <button id="save-role">保存</button>
                                    <button class="delete-role" id="delete-role">删除</button>
                                </div>
                            </div>
                            <textarea class="role-prompt" id="role-prompt" placeholder="请输入角色设定，例如：
角色：魔法学院的教授
性格：严肃但关心学生，知识渊博
说话风格：使用古老而正式的语言，偶尔引用魔法典籍
背景：在魔法学院任教超过50年，精通各种魔法理论"></textarea>
                        </div>
                    </div>
                </div>
                
                <div class="config-actions">
                    <button id="save-config" class="secondary">保存配置</button>
                    <button id="test-api">测试连接</button>
                </div>
                
                <div id="api-status" class="api-status"></div>
            </section>

            <section class="chat-section">
                <div class="chat-header">
                    <span>角色扮演对话</span>
                    <span id="current-role-display" class="current-role">未选择角色</span>
                </div>
                <div class="chat-messages" id="chat-messages">
                    <div class="message assistant">
                        <div class="message-content">
                            <div class="message-role">系统</div>
                            欢迎使用角色扮演AI对话系统！请先在左侧创建或选择一个角色，然后开始对话。
                        </div>
                    </div>
                </div>
                <div class="typing-indicator" id="typing-indicator">
                    <div class="typing-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="chat-input">
                    <textarea id="message-input" placeholder="输入您的问题..." rows="2"></textarea>
                    <button id="send-button">发送</button>
                </div>
            </section>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>